<script setup lang="ts">
import {Clock, Heart, Star} from 'lucide-vue-next'
import {useRouter} from 'vue-router'

interface Recipe {
  id: string
  title: string
  description: string
  image: string
  cookTime: number
  rating: number
  isFavorite: boolean
}

interface Props {
  recipe: Recipe
}

const props = defineProps<Props>()
const emit = defineEmits<{
  favoriteToggle: [recipeId: string]
}>()

const router = useRouter()

const handleClick = () => {
  router.push(`/recipe/${props.recipe.id}`)
}

const toggleFavorite = () => {
  emit('favoriteToggle', props.recipe.id)
}
</script>

<template>
  <div class="recipe-card" @click="handleClick">
    <div class="card-image">
      <!--todo      <img :src="recipe.image" :alt="recipe.title"/>-->
      <img src="/src/assets/images/BlueGirl.jpg" :alt="recipe.title"/>
      <button
          @click.stop="toggleFavorite"
          class="favorite-btn"
          :class="{ active: recipe.isFavorite }"
      >
        <Heart :size="20"/>
      </button>
    </div>

    <div class="card-content">
      <h3 class="recipe-title">{{ recipe.title }}</h3>
      <p class="recipe-description">{{ recipe.description }}</p>

      <div class="recipe-meta">
        <div class="meta-item">
          <Clock :size="16"/>
          <span>{{ recipe.cookTime }}分钟</span>
        </div>
        <div class="meta-item">
          <Star :size="16"/>
          <span>{{ recipe.rating }}</span>
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.recipe-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

.card-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  &:hover img {
    transform: scale(1.05);
  }
}

.favorite-btn {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 36px;
  height: 36px;
  border: none;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--color-text-light);

  &.active {
    color: var(--color-error);
    background-color: rgba(231, 76, 60, 0.1);
  }

  &:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
  }
}

.card-content {
  padding: var(--spacing-md);
}

.recipe-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
}

.recipe-description {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recipe-meta {
  display: flex;
  gap: var(--spacing-md);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);

  svg {
    color: var(--color-primary);
  }
}
</style>
